<template>
  <div class="select-customer-dialog">
    <el-dialog :visible.sync="visible" width="56%" :before-close="handleClose">
      <div slot="title" style="font-size: 14px;font-weight: 500;">
        选择目标客户群
      </div>
      <div class="select-customer-dialog-container">
        <div class="add-group-friend-left">
          <div class="header">
            <div class="title">筛选</div>
            <el-button type="primary" size="mini" plain class="clear-btn">清空条件</el-button>
          </div>
          <el-form ref="form" :model="form" label-width="120px" class="add-group-friend-form" label-position="top">
            <el-form-item label="群名称：" prop="pass">
              <div class="flex-rows">
                <el-select size="small">
                  <el-option v-for="item in keyWords" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <el-input placeholder="可输入多个，按enter确认" v-model="input3" size="small">
                  <el-button slot="append" icon="el-icon-plus" size="small"></el-button>
                </el-input>
              </div>
            </el-form-item>
            <el-form-item label="标签：" prop="pass">
              <div class="flex-rows">
                <el-select size="small">
                  <el-option v-for="item in keyTags" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <MultipleSelect size="small" placeholder='智能标签' :receiverNameOpt='lableOpt' />
              </div>
            </el-form-item>
            <el-form-item label="其他：" prop="pass">
              <div class="flex-rows">
                <el-input value="是否群主/管理" readonly size="small" />
                <el-select size="small" placeholder="请选择">
                  <el-option label="群主/群管理员" :value="1"></el-option>
                  <el-option label="群主" :value="2"></el-option>
                  <el-option label="群成员" :value="3"></el-option>
                </el-select>
              </div>
              <div class="flex-rows">
                <el-input value="群成员数" readonly size="small" />
                <el-dropdown placement="bottom">
                  <el-input class="search-input" size="small" placeholder="请选择" suffix-icon="el-icon-arrow-down" />
                  <el-dropdown-menu slot="dropdown">
                    <div class="threshold-content">
                      <div class="input-rows">
                        <el-input placeholder="最小值" style="width: 88px" />
                        <span class="delimiter">~</span>
                        <el-input placeholder="最大值" style="width: 88px" />
                      </div>
                      <el-button class="submit-button" type="primary" size="small">确定</el-button>
                    </div>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-form-item>
            <div class="seting">
              <div class="seting-left">设置排除条件
                <el-switch v-model="value" active-color="#13ce66"></el-switch>
              </div>
              <span class="seting-right">开启后将排除满足以下条件客户群</span>
            </div>
          </el-form>
        </div>
        <div class="add-group-friend-right">
          <el-table ref="addGroupTbale" :data="tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="60"></el-table-column>
            <el-table-column property="mobile">
              <template slot="header">
                <div>
                  客户群（18）
                </div>
              </template>
              <template slot-scope="scope">
                <div class="company-account">
                  <img class="account-cover" src="https://wework.qpic.cn/wwpic/177031_HhrnVYv6QQSgQ2C_1686909054/0" />
                  <div class="account-info">
                    <div class="name">闵雨微</div>
                    <div class="context">
                      <span>群成员：1</span>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column property="mobile">
              <template slot-scope="scope">
                <div class="tag">群主</div>
              </template>
            </el-table-column>
            <template slot="empty">
              <TableEmpty />
            </template>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="dialog-footer-flex">
          <span>已选择：<span style="color: rgb(240, 139, 0);margin: 0 4px;">0</span>客户</span>
          <div>
            <el-button @click="onClose">取消</el-button>
            <el-button type="primary" @click="onClose">确认</el-button>
          </div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import MultipleSelect from '@/components/MultipleSelect'
export default {
  data() {
    return {
      status: '',
      tableData: [{id: 1}]
    }
  },
  props: ['visible'],
  components: {
    MultipleSelect
  },
  methods: {
    onClose() {
      this.$emit('handCloseDialog');
    }
  },
}
</script>
<style lang="scss" scoped>
.select-customer-dialog {
  ::v-deep .el-dialog__body {
    padding: 0;
    background: #ffffff;
  }

  .select-customer-dialog-container {
    font-size: 14px;
    line-height: 22px;
    display: flex;

    .add-group-friend-left {
      max-height: 600px;
      width: 400px;
      background-color: #fff;
      position: relative;

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fafafa;
        box-shadow: 0 1px 0 0 #e9e9e9;
        padding: 0 20px;
        height: 40px;

        .title {
          color: rgba(0, 0, 0, .65);
          font-size: 14px;
        }

        .clear-btn {
          width: 68px;
          height: 24px;
          font-size: 13px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .add-group-friend-form {
        padding: 16px 16px;

        ::v-deep .el-form-item {
          margin-bottom: 16px;
        }

        ::v-deep .el-form-item--medium .el-form-item__label {
          line-height: 24px;
          padding: 0 0 6px;
        }

        .flex-rows {
          display: grid;
          column-gap: 6px;
          grid-template-columns: 126px 233px;
          align-items: center;
          position: relative;
        }

        .seting {
          display: flex;
          justify-content: space-between;
          background: rgb(247, 247, 247);
          height: 38px;
          margin: 20px 0px 0px;
          padding: 8px;
          row-gap: 0px;
          font-size: 14px;

          .seting-right {
            color: rgb(255, 153, 0);
          }
        }
      }
    }

    .add-group-friend-right {
      flex: 1 1;

      ::v-deep .el-table .el-table__cell {
        padding: 0 12px !important;
      }

      .company-account {
        display: flex;
        align-items: center;

        .account-cover {
          width: 40px;
          height: 40px;
        }

        .account-info {
          margin-left: 8px;
          padding: 10px 0;

          .name {
            font-size: 14px;
            line-height: 22px;
            color: #222333;
          }

          .context {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
            gap: 4px;

          }
          
          .groupNums {
            font-size: 12px;
            color: #888999;
          }
        }
        
        .accept-account {
          font-size: 14px;
          line-height: 22px;
        }
      }
      .tag {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: rgba(0,0,0,.65);
        width: 36px;
        height: 20px;
        background: #fafafa;
        border-radius: 4px;
        border: 1px solid #e9e9e9;
      }
    }
  }
  .dialog-footer-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 14px;
    }
  }
}
</style>